<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			position:absolute;
			background-color: rgb(230,225,215);
		}
		#two_reader{
			position:relative;
			width: 800px;
			background-color: rgb(242,238,229);
			margin: auto;
			margin-left: 35%;

		}
		#two_reader>h3>p{
			width: 800px;
			margin-top: 50px;
			line-height: 50px;
		}
		#two_reader>h1{
			margin-left: 50px;
			margin-top: 50px;
			
		}
		#two_pl{
			position: fixed;
			width: 470px;
			background-color: rgb(242,238,229);
			left: 0px;
			top: 100px;
			overflow-wrap:break-word; 
			float:right;
		}
		#two_pl>h2,.two_display{
			display: inline-block;
			vertical-align: middle;
		}
		.two_display{
			margin-left:200px;
			cursor: pointer;
		}
		.two_display:hover{
			color:red;
		}
		
		#two_reader,#two_pl{
			display: inline-block;
			vertical-align: middle;
		}
		#two_say{
			height: 150px;
			width: 200px;
			margin: auto;
			line-height: 500px;
		}
		#two_say>a{
			height: 50px;
			width: 50px;
			text-align: center;
		}
		#two_p{
			overflow-wrap:break-word; 
		}
		
		h8:{
			cursor: pointer;
		}
		h8:hover{
			cursor: pointer;
			color:red;
		}
		:root {
  --line-height: 1.5;
  --letter-spacing: 1px;
  --word-spacing: 3px;
}
		#two_p{
			line-height: var(--line-height);
	  letter-spacing: var(--letter-spacing);
	  word-spacing: var(--word-spacing);
		}
		p{
			text-indent: 40px;
			 margin-bottom: 20px;
		}
		
	</style>
</head>
<script src="js/jquery-3.7.1.js">
</script>
<body>
	<div id="two_header">
		<div id="two_reader">
			<h1>第${num }章&nbsp;${list[0].chapterName }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;★</h1><h8 onclick="pl()">点我查看评论</h8><br>
			
			<h3><p id="two_p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${list[0].chapterContent }</p></h3>
			<div id="two_say">
				
				<a href="MessageServlet2?chapterId=${(list[0].chapterId-1)<1?1:(list[0].chapterId-1) }&novelId=${novelId}">上一章</a>
				<a href="shu.jsp?novelId=${novelId}">目录</a>
				<a  href="MessageServlet2?chapterId=${(list[0].chapterId+1) }&novelId=${novelId}">下一章</a>
			</div>
		</div>
		<div id="two_pl" style="display:none">
			<h2>欢迎来到小说贴吧</h2><h2 onclick="displaypl()" class="two_display">X</h2><br>
			<input id="context" type="text">&nbsp;&nbsp;&nbsp;<input type="button" onclick="out()" value="发表"><br>
		
		</div>
	</div>
	
</body>
<script>
	var bodyheight=window.screen.height;
	console.log(bodyheight);
	$("#two_pl").height(500);
	// $("#two_pl").css("top","-4900px");
	function pl(){
		$("#two_reader").css("margin-left","100px");
		$("#two_pl").css("margin-left","900px");
		$("#two_pl").css("display","block");
		
	}
	function displaypl(){
		var bodywidth=document.body.clientWidth;
		$("#two_reader").css("margin-left","35%");
		$("body").width($("#two_reader").width());
		$("#two_pl").css("display","none");
		
	}
	function out(){
			$.ajax({
				"type":"get",
				"data":"context="+$("#context").val(),
				"url":"PlServlet",
				"dataType":"json",
				"success":function(dataJson){
					console.log(typeof(dataJson));
					console.log(dataJson);
					$(dataJson).each(function(index,el){
						$("#two_pl").append("<span id='outcontext'></span>"+el+"<br>");
						$("#outcontext").css("color","black");
					});
				}
			});
	}
	
	
	const container = document.getElementById('two_p');
	// 获取原始文本
	const originalText = container.textContent;

	// 使用正则表达式匹配句号，并分割文本
	const sentences = originalText.match(/[^。!?]+[。!?]*/g);

	// 检查是否有匹配到句子
	if (sentences) {
	  // 创建一个新的元素来存放分段后的句子
	  const newContainer = document.createElement('div');

	  // 遍历句子数组，为每个句子创建一个段落，并添加到新容器中
	  sentences.forEach(sentence => {
	    const p = document.createElement('p');
	    p.textContent = sentence.trim();
	    newContainer.appendChild(p);
	  });

	  // 替换原始文本容器的内容
	  container.innerHTML = '';
	  container.appendChild(newContainer);
	}
	
</script>
</html>